<template>
  <div>
    <div class="container">
      <div class="block">
        <span class="demonstration">请选择月份</span>
        <el-date-picker
          v-model="myMonth"
          type="month"
          placeholder="选择月">
        </el-date-picker>
      </div>
    </div>
    <div id="main" style="height: 1000px;"></div>
  </div>
</template>
<script>
  export default {
    name: "baseEchartsCalendar",
    data() {
      return {
        cellSize: [150, 150],
        pieRadius: 60,
        ChartLineGraph:null,
        myMonth: null,
        oldDate: null,
        newDate: null,
        currentMonth: null,
      };
    },
    mounted() {
      this.getCurrentDate(this.myMonth);
    },
    methods: {

      getCurrentDate(value) {
        // let currentDate = new Date();
        if (value) {
          this.oldDate = this.$echarts.format.formatTime('yyyy-MM-dd', value);
          this.currentMonth = this.$echarts.format.formatTime('yyyy-MM', value);
          let creartDate = this.$echarts.number.parseDate(this.oldDate);
          creartDate.setMonth(creartDate.getMonth() + 1);
          this.newDate = this.$echarts.format.formatTime('yyyy-MM-dd', creartDate);
        } else {
          let my = this.$echarts.format.formatTime('yyyy-MM', new Date());
          this.myMonth = this.$echarts.number.parseDate(my);
        }
      },

      // 获取日历数据
      getVirtulData(oldDate, newDate) {
        let date = +this.$echarts.number.parseDate(oldDate);
        let end = +this.$echarts.number.parseDate(newDate);
        let dayTime = 3600 * 24 * 1000;
        let data = [];
        for (let time = date; time < end; time += dayTime) {
          data.push([
            this.$echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 10000)
          ]);
        }
        return data;
      },
      // 获取饼图中的数据
      getPieSeries(scatterData, chart) {
        return this.$echarts.util.map(scatterData, (item, index) => {
          let center = chart.convertToPixel('calendar', item);
          console.log(item);
          return {
            id: index + 'pie',
            type: 'pie',
            center: center,
            label: {
              normal: {
                formatter: '{c}',
                position: 'inside'
              }
            },
            radius: this.pieRadius,
            data: [
              {name: '工作', value: Math.round(Math.random() * 24)},
              {name: '娱乐', value: Math.round(Math.random() * 24)},
              {name: '睡觉', value: Math.round(Math.random() * 24)},
              {name: '泡妞', value: Math.round(Math.random() * 24)},
            ]
          };
        });
      },

      getPieSeriesUpdate(scatterData, chart) {
        return this.$echarts.util.map(scatterData, (item, index) => {
          let center = chart.convertToPixel('calendar', item);
          return {
            id: index + 'pie',
            center: center
          };
        });
      },

      handleCharts(oldDate, newDate, currentMonth) {
        this.ChartLineGraph = this.$echarts.init(document.getElementById("main"));
        let scatterData = this.getVirtulData(oldDate, newDate);  // 日历信息
        let option = {
          tooltip: {},
          legend: {
            data: ['工作', '娱乐', '睡觉', '泡妞'],
            bottom: 20
          },
          calendar: {
            top: 'middle',
            left: 'center',
            orient: 'vertical', //设置坐标的方向，既可以横着也可以竖着
            cellSize: this.cellSize, //设置日历格大小
            yearLabel: {
              show: false,
              textStyle: {
                fontSize: 30
              }
            },
            dayLabel: {
              margin: 20,
              firstDay: 1,
              nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
              show: true
            },
            monthLabel: {
              show: false
            },
            range: [currentMonth]
          },
          series: [{
            id: 'label',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
              normal: {
                show: true,
                formatter: (params) => {
                  return this.$echarts.format.formatTime('dd', params.value[0]);
                },
                offset: [-this.cellSize[0] / 2 + 10, -this.cellSize[1] / 2 + 10],
                textStyle: {
                  color: '#000',
                  fontSize: 14
                }
              }
            },
            data: scatterData
          }]
        };
        if (!this.ChartLineGraph.inNode) {
          // var this = this;
          let pieInitialized;
          setTimeout(() => {
            pieInitialized = true;
            this.ChartLineGraph.setOption({
              series: this.getPieSeries(scatterData, this.ChartLineGraph)
            });
          }, 10);

          this.ChartLineGraph.onresize = () => {
            if (pieInitialized) {
              this.ChartLineGraph.setOption({
                series: this.getPieSeriesUpdate(scatterData, this.ChartLineGraph)
              });
            }
          };
        }
        this.ChartLineGraph.setOption(option)
      }

    },
    watch: {
      myMonth: function (value) {
        if (this.ChartLineGraph) {
          this.ChartLineGraph.clear();
        }
        console.log(value);
        this.getCurrentDate(this.myMonth);
        this.handleCharts(this.oldDate, this.newDate, this.currentMonth);
      }
    }
  };
</script>
